<template>
    <scroll-view scroll-y="true" class="toolBar-all">
        <MineToolSearch></MineToolSearch>
        <view class="content-all">
            <MineOrder :orderBarData="orderBarData" @changeState="changeState">
                <view slot="0" v-if="orderBarData[0].state">
					<!-- 商品订单 -->
                    <view
                        class="order-content"
                        v-for="item in goodsOrderList"
                        :key="item.productOrderId"
                    >
                        <view class="order-content-top">
                            <view>
                                <image
                                    class="shopLogo"
                                    src="https://z3.ax1x.com/2021/04/09/ctvY6A.png"
                                ></image>
                                <text>蜗牛养车系统自营店</text>
                                <image
                                    class="backLogo"
                                    src="https://z3.ax1x.com/2021/04/08/ctEfZ4.png"
                                ></image>
                            </view>
                            <view class="delBox">
                                <image
                                    class="delLogo"
                                    src="https://z3.ax1x.com/2021/04/10/caClfx.png"
                                    mode=""
                                ></image>
                            </view>
                        </view>
                        <view class="order-content-center">
                            <view class="order-center-left">
                                <image :src="item.productOrderDetails[0].productImage" mode=""></image>
                            </view>
                            <view class="order-center-center">
                                <view class="goodsName">
                                    {{ item.productOrderDetails[0].productName }}
                                </view>
                                <view class="goodsPrice">
                                    ￥
                                    <text>{{
                                        item.amountPayable
                                    }}</text>
                                </view>
                                <view class="goodsTotle">
                                    <view>
                                        <text class="totleTitle">总价</text>
                                        <text>￥{{ item.productAmountTotal }}</text>
                                    </view>
                                    <view>
                                        <text class="totleTitle">优惠</text>
                                        <text>￥{{ item.couponMoney }}</text>
                                    </view>
                                </view>
                            </view>
                            <view class="order-center-right">
                                <view class="goodsNum"> x {{item.productSum}} </view>
                                <view class="shijiprice">
                                    实付款
                                    <text>￥</text>
                                    <text>{{
                                        item.amountPayable
                                    }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-content-bottom">
                            <template v-if="item.productOrderStatus == '106'">
                                <view class="bottom-Btn"> 修改地址 </view>
                                <view class="bottom-Btn"> 帮我付 </view>
                                <view class="bottom-Btn importantBtn">
                                    去支付
                                </view>
                            </template>
                            <template v-if="item.productOrderStatus == '111'">
                                <view class="bottom-Btn"> 查看发票 </view>
                                <view class="bottom-Btn importantBtn">
                                    待发货
                                </view>
                            </template>
                            <template v-if="item.productOrderStatus == '107'">
                                <view class="bottom-Btn"> 退换 </view>
                                <view class="bottom-Btn"> 延长收货 </view>
                                <view class="bottom-Btn"> 查看物流 </view>
                                <view class="bottom-Btn importantBtn">
                                    确认收货
                                </view>
                            </template>
                            <template v-if="item.productOrderStatus == '108'">
                                <view class="bottom-Btn"> 查看发票 </view>
                                <view class="bottom-Btn importantBtn">
                                    评价
                                </view>
                            </template>
                            <template v-if="item.productOrderStatus == '112'">
                                <view class="bottom-Btn"> 售后评价 </view>
                                <view class="bottom-Btn importantBtn">
                                    退款进度
                                </view>
                            </template>
                        </view>
                    </view>
					<!-- 服务订单 -->
					<view
					    class="order-content"
					    v-for="item in serviceOrderList"
					    :key="item.id"
					>
					    <view class="order-content-top">
					        <view>
					            <image
					                class="shopLogo"
					                src="https://z3.ax1x.com/2021/04/09/ctvY6A.png"
					            ></image>
					            <text>{{ item.shopName }}</text>
					            <image
					                class="backLogo"
					                src="https://z3.ax1x.com/2021/04/08/ctEfZ4.png"
					            ></image>
					        </view>
					        <view class="delBox">
					            <image
					                class="delLogo"
					                src="https://z3.ax1x.com/2021/04/10/caClfx.png"
					                mode=""
					            ></image>
					        </view>
					    </view>
					    <view class="order-content-center">
					        <view class="order-center-left">
					            <image :src="item.shopImage" mode=""></image>
					        </view>
					        <view class="order-center-center">
					            <view class="goodsName">
					                {{ item.carserviceName }}
					            </view>
					            <view class="goodsPrice">
					                ￥
					                <text>{{
					                    item.cartserviceOrderAmountTotal
					                }}</text>
					            </view>
					            <view class="goodsTotle">
					                <view>
					                    <text class="totleTitle">总价</text>
					                    <text>￥{{ item.cartserviceOrderAmountTotal }}</text>
					                </view>
					                <view>
					                    <text class="totleTitle">优惠</text>
					                    <text>￥{{ item.couponMoney }}</text>
					                </view>
					            </view>
					        </view>
					        <view class="order-center-right">
					            <view class="goodsNum"> x1 </view>
					            <view class="shijiprice">
					                实付款
					                <text>￥</text>
					                <text>{{
					                    item.cartserviceOrderAmountTotal
					                }}</text>
					            </view>
					        </view>
					    </view>
					    <view class="order-content-bottom">
					        <template v-if="item.carserviceOrderStatus == '106'">
					            <view class="bottom-Btn"> 修改地址 </view>
					            <view class="bottom-Btn"> 帮我付 </view>
					            <view class="bottom-Btn importantBtn">
					                去支付
					            </view>
					        </template>
					        <template v-if="item.carserviceOrderStatus == '101'">
					            <view class="bottom-Btn"> 查看发票 </view>
					            <view class="bottom-Btn importantBtn">
					                使用
					            </view>
					        </template>
					        <template v-if="item.carserviceOrderStatus == '107'">
					            <view class="bottom-Btn"> 退换 </view>
					            <view class="bottom-Btn"> 延长收货 </view>
					            <view class="bottom-Btn"> 查看物流 </view>
					            <view class="bottom-Btn importantBtn">
					                服务进行中
					            </view>
					        </template>
					        <template v-if="item.carserviceOrderStatus == '102'">
					            <view class="bottom-Btn"> 查看发票 </view>
					            <view class="bottom-Btn importantBtn">
					                评价
					            </view>
					        </template>
					        <template v-if="item.carserviceOrderStatus == '112'">
					            <view class="bottom-Btn"> 售后评价 </view>
					            <view class="bottom-Btn importantBtn">
					                退款进度
					            </view>
					        </template>
					    </view>
					</view>
                </view>
                <view slot="1" v-if="orderBarData[1].state">
                    <view class="order-content">
                        <view class="order-content-top">
                            <view>
                                <image
                                    class="shopLogo"
                                    src="https://z3.ax1x.com/2021/04/09/ctvY6A.png"
                                ></image>
                                <text>武侯区蓉城汽车美容</text>
                                <image
                                    class="backLogo"
                                    src="https://z3.ax1x.com/2021/04/08/ctEfZ4.png"
                                ></image>
                            </view>
                            <view class="delBox">
                                <image
                                    class="delLogo"
                                    src="https://z3.ax1x.com/2021/04/10/caClfx.png"
                                ></image>
                            </view>
                        </view>
                        <view class="order-content-center">
                            <view class="order-center-left">
                                <image
                                    src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg"
                                    mode=""
                                ></image>
                            </view>
                            <view class="order-center-center">
                                <view class="goodsName">
                                    标准洗车-5座轿车
                                </view>
                                <view class="goodsPrice">
                                    ￥
                                    <text>25.00</text>
                                </view>
                                <view class="goodsTotle">
                                    <view>
                                        <text class="totleTitle">总价</text>
                                        <text>￥33.00</text>
                                    </view>
                                    <view>
                                        <text class="totleTitle">优惠</text>
                                        <text>￥8.00</text>
                                    </view>
                                </view>
                            </view>
                            <view class="order-center-right">
                                <view class="goodsNum"> x1 </view>
                                <view class="shijiprice">
                                    实付款
                                    <text>￥</text>
                                    <text>25.00</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-content-bottom">
                            <view class="bottom-Btn"> 修改地址 </view>
                            <view class="bottom-Btn"> 帮我付 </view>
                            <view class="bottom-Btn importantBtn">
                                去支付
                            </view>
                        </view>
                    </view>
                </view>
                <view slot="2" v-if="orderBarData[2].state">
                    <view class="order-content">
                        <view class="order-content-top">
                            <view>
                                <image
                                    class="shopLogo"
                                    src="https://z3.ax1x.com/2021/04/09/ctvY6A.png"
                                ></image>
                                <text>武侯区蓉城汽车美容</text>
                                <image
                                    class="backLogo"
                                    src="https://z3.ax1x.com/2021/04/08/ctEfZ4.png"
                                ></image>
                            </view>
                            <view class="delBox">
                                <image
                                    class="delLogo"
                                    src="https://z3.ax1x.com/2021/04/10/caClfx.png"
                                ></image>
                            </view>
                        </view>
                        <view class="order-content-center">
                            <view class="order-center-left">
                                <image
                                    src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg"
                                    mode=""
                                ></image>
                            </view>
                            <view class="order-center-center">
                                <view class="goodsName">
                                    标准洗车-5座轿车
                                </view>
                                <view class="goodsPrice">
                                    ￥
                                    <text>25.00</text>
                                </view>
                                <view class="goodsTotle">
                                    <view>
                                        <text class="totleTitle">总价</text>
                                        <text>￥33.00</text>
                                    </view>
                                    <view>
                                        <text class="totleTitle">优惠</text>
                                        <text>￥8.00</text>
                                    </view>
                                </view>
                            </view>
                            <view class="order-center-right">
                                <view class="goodsNum"> x1 </view>
                                <view class="shijiprice">
                                    实付款
                                    <text>￥</text>
                                    <text>25.00</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-content-bottom">
                            <view class="bottom-Btn"> 查看发票 </view>
                            <view class="bottom-Btn importantBtn"> 使用 </view>
                        </view>
                    </view>
                </view>
                <view slot="3" v-if="orderBarData[3].state">
                    <view class="order-content">
                        <view class="order-content-top">
                            <view>
                                <image
                                    class="shopLogo"
                                    src="https://z3.ax1x.com/2021/04/09/ctvY6A.png"
                                ></image>
                                <text>武侯区蓉城汽车美容</text>
                                <image
                                    class="backLogo"
                                    src="https://z3.ax1x.com/2021/04/08/ctEfZ4.png"
                                ></image>
                            </view>
                            <view class="delBox">
                                <image
                                    class="delLogo"
                                    src="https://z3.ax1x.com/2021/04/10/caClfx.png"
                                ></image>
                            </view>
                        </view>
                        <view class="order-content-center">
                            <view class="order-center-left">
                                <image
                                    src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg"
                                    mode=""
                                ></image>
                            </view>
                            <view class="order-center-center">
                                <view class="goodsName">
                                    标准洗车-5座轿车
                                </view>
                                <view class="goodsPrice">
                                    ￥
                                    <text>25.00</text>
                                </view>
                                <view class="goodsTotle">
                                    <view>
                                        <text class="totleTitle">总价</text>
                                        <text>￥33.00</text>
                                    </view>
                                    <view>
                                        <text class="totleTitle">优惠</text>
                                        <text>￥8.00</text>
                                    </view>
                                </view>
                            </view>
                            <view class="order-center-right">
                                <view class="goodsNum"> x1 </view>
                                <view class="shijiprice">
                                    实付款
                                    <text>￥</text>
                                    <text>25.00</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-content-bottom">
                            <view class="bottom-Btn"> 退换 </view>
                            <view class="bottom-Btn"> 延长收货 </view>
                            <view class="bottom-Btn"> 查看物流 </view>
                            <view class="bottom-Btn importantBtn">
                                确认收货
                            </view>
                        </view>
                    </view>
                </view>
                <view slot="4" v-if="orderBarData[4].state">
                    <view class="order-content">
                        <view class="order-content-top">
                            <view>
                                <image
                                    class="shopLogo"
                                    src="https://z3.ax1x.com/2021/04/09/ctvY6A.png"
                                ></image>
                                <text>武侯区蓉城汽车美容</text>
                                <image
                                    class="backLogo"
                                    src="https://z3.ax1x.com/2021/04/08/ctEfZ4.png"
                                ></image>
                            </view>
                            <view class="delBox">
                                <image
                                    class="delLogo"
                                    src="https://z3.ax1x.com/2021/04/10/caClfx.png"
                                ></image>
                            </view>
                        </view>
                        <view class="order-content-center">
                            <view class="order-center-left">
                                <image
                                    src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg"
                                    mode=""
                                ></image>
                            </view>
                            <view class="order-center-center">
                                <view class="goodsName">
                                    标准洗车-5座轿车
                                </view>
                                <view class="goodsPrice">
                                    ￥
                                    <text>25.00</text>
                                </view>
                                <view class="goodsTotle">
                                    <view>
                                        <text class="totleTitle">总价</text>
                                        <text>￥33.00</text>
                                    </view>
                                    <view>
                                        <text class="totleTitle">优惠</text>
                                        <text>￥8.00</text>
                                    </view>
                                </view>
                            </view>
                            <view class="order-center-right">
                                <view class="goodsNum"> x1 </view>
                                <view class="shijiprice">
                                    实付款
                                    <text>￥</text>
                                    <text>25.00</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-content-bottom">
                            <view class="bottom-Btn"> 查看发票 </view>
                            <view class="bottom-Btn importantBtn"> 评价 </view>
                        </view>
                    </view>
                </view>
                <view slot="5" v-if="orderBarData[5].state">
                    <view class="order-content">
                        <view class="order-content-top">
                            <view>
                                <image
                                    class="shopLogo"
                                    src="https://z3.ax1x.com/2021/04/09/ctvY6A.png"
                                ></image>
                                <text>武侯区蓉城汽车美容</text>
                                <image
                                    class="backLogo"
                                    src="https://z3.ax1x.com/2021/04/08/ctEfZ4.png"
                                ></image>
                            </view>
                            <view class="delBox">
                                <image
                                    class="delLogo"
                                    src="https://z3.ax1x.com/2021/04/10/caClfx.png"
                                ></image>
                            </view>
                        </view>
                        <view class="order-content-center">
                            <view class="order-center-left">
                                <image
                                    src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg"
                                    mode=""
                                ></image>
                            </view>
                            <view class="order-center-center">
                                <view class="goodsName">
                                    标准洗车-5座轿车
                                </view>
                                <view class="goodsPrice">
                                    ￥
                                    <text>25.00</text>
                                </view>
                                <view class="goodsTotle">
                                    <view>
                                        <text class="totleTitle">总价</text>
                                        <text>￥33.00</text>
                                    </view>
                                    <view>
                                        <text class="totleTitle">优惠</text>
                                        <text>￥8.00</text>
                                    </view>
                                </view>
                            </view>
                            <view class="order-center-right">
                                <view class="goodsNum"> x1 </view>
                                <view class="shijiprice">
                                    实付款
                                    <text>￥</text>
                                    <text>25.00</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-content-bottom">
                            <view class="bottom-Btn"> 售后评价 </view>
                            <view class="bottom-Btn importantBtn">
                                退款进度
                            </view>
                        </view>
                    </view>
                </view>
            </MineOrder>
        </view>
        <view style="margin-left: 35rpx">
            <selectedRecommendation></selectedRecommendation>
        </view>
    </scroll-view>
</template>

<script>
import MineToolSearch from "../../../components/mineToolSearch/mineToolSearch.vue";
import MineOrder from "../../../components/mineOrder/mineOrder.vue";
import selectedRecommendation from "../../../components/selected-recommendation/selected-recommendation";
import {createNamespacedHelpers} from "vuex"
let {mapActions,mapState}=createNamespacedHelpers("mineOrder")
export default {
    data() {
        return {
            orderBarData: [
                { id: 0, text: "全部", state: false },
                { id: 1, text: "待支付", state: false },
                { id: 2, text: "待使用", state: false },
                { id: 3, text: "待收货", state: false },
                { id: 4, text: "待评价", state: false },
                { id: 5, text: "退款/售后", state: false },
            ],
            orderData: [
                {
                    id: 0,
                    shopName: "武侯区蓉城汽车美容",
                    goodName: "标准洗车-5座轿车",
                    totalPrice: 58,
                    discount: 8,
                    num: 1,
                    fileName:
                        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg",
                    state: "106",
                },
                {
                    id: 1,
                    shopName: "武侯区蓉城汽车美容",
                    goodName: "标准洗车-5座轿车",
                    totalPrice: 58,
                    discount: 8,
                    num: 1,
                    fileName:
                        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg",
                    state: "100",
                },
                {
                    id: 2,
                    shopName: "武侯区蓉城汽车美容",
                    goodName: "标准洗车-5座轿车",
                    totalPrice: 58,
                    discount: 8,
                    num: 1,
                    fileName:
                        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg",
                    state: "109",
                },
                {
                    id: 3,
                    shopName: "武侯区蓉城汽车美容",
                    goodName: "标准洗车-5座轿车",
                    totalPrice: 58,
                    discount: 8,
                    num: 1,
                    fileName:
                        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg",
                    state: "111",
                },
                {
                    id: 4,
                    shopName: "武侯区蓉城汽车美容",
                    goodName: "标准洗车-5座轿车",
                    totalPrice: 58,
                    discount: 8,
                    num: 1,
                    fileName:
                        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4182756769,2984672335&fm=11&gp=0.jpg",
                    state: "107",
                },
            ],
        };
    },
    methods: {
        ...mapActions(["getOrderAllInfo"]),
        changeState(val) {
            this.orderBarData.map((item) => {
                if (item.id == val) {
                    return (item.state = true);
                } else {
                    return (item.state = false);
                }
            });
        },
    },
    onLoad: function (option) {
        this.changeState(option.id);
        this.getOrderAllInfo();
    },
    components: {
        MineToolSearch,
        MineOrder,
        selectedRecommendation,
    },
    computed: {
		...mapState(["goodsOrderList","serviceOrderList"]),
        //待支付  state="106"
		//商品待支付
        goodsArrearage() {
            return this.goodsOrderList.filter((item) => item.state == "106");
        },
		//服务待支付
		serviceArrearage() {
		    return this.serviceOrderList.filter((item) => item.state == "106");
		},
		//商品待发货
		goodsUndelivered() {
		    return this.goodsOrderList.filter((item) => item.state == "101");
		},
		//服务待使用
		serviceUndelivered() {
		    return this.serviceOrderList.filter((item) => item.state == "106");
		},
		//商品待收货
		goodsDispatched() {
		    return this.goodsOrderList.filter((item) => item.state == "107");
		},
		//服务进行中==待收货
		serviceUndelivered() {
		    return this.serviceOrderList.filter((item) => item.state == "107");
		},
		//商品待评价
		goodsDispatched() {
		    return this.goodsOrderList.filter((item) => item.state == "102");
		},
		//服务待评价
		serviceUndelivered() {
		    return this.serviceOrderList.filter((item) => item.state == "108");
		},
		//商品售后
        goodsDrawback() {
            return this.goodsOrderList.filter((item) => item.state == "112");
        },
		//服务售后
		serivceDrawback() {
		    return this.serviceOrderList.filter((item) => item.state == "112");
		},
    },
};
</script>

<style lang="scss" scoped>
.toolBar-all {
    height: 100vh;
    background-color: #f9f9f9;
    .content-all {
        padding-top: 30rpx;
        .order-content {
            width: 90vw;
            // height: 300rpx;
            background-color: white;
            border-radius: 20rpx;
            margin: 30rpx auto;
            box-sizing: border-box;
            padding: 20rpx;
            .order-content-top {
                display: flex;
                width: 100%;
                height: 80rpx;
                // background-color: pink;
                align-items: center;
                justify-content: space-between;
                text {
                    vertical-align: middle;
                }
                .shopLogo {
                    width: 28rpx;
                    height: 28rpx;
                    vertical-align: middle;
                    margin-right: 20rpx;
                }
                .backLogo {
                    width: 14rpx;
                    height: 20rpx;
                    vertical-align: middle;
                    margin-left: 20rpx;
                }
                .delBox {
                    .delLogo {
                        width: 50rpx;
                        height: 50rpx;
                    }
                }
            }
            .order-content-center {
                width: 100%;
                display: flex;
                height: 130rpx;
                justify-content: space-between;
                box-sizing: border-box;
                font-size: 24rpx;
                .order-center-left {
                    width: 30%;
                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 20rpx;
                    }
                }
                .order-center-center {
                    width: 48%;
                    padding-left: 10rpx;
                    .goodsName {
                        font-size: 32rpx;
                    }
                    .goodsPrice {
                        font-weight: 600;
                        margin-top: 10rpx;
                        margin-bottom: 10rpx;
                        text {
                            font-size: 32rpx;
                        }
                    }
                    .goodsTotle {
                        display: flex;
                        color: gray;
                        .totleTitle {
                            font-size: 26rpx;
                        }
                    }
                }
                .order-center-right {
                    width: 22%;
                    text-align: right;
                    margin-top: 40rpx;
                    text {
                        font-weight: 600;
                        &:nth-of-type(2) {
                            font-size: 30rpx;
                        }
                    }
                }
            }
            .order-content-bottom {
                display: flex;
                justify-content: flex-end;
                margin-top: 30rpx;
                .bottom-Btn {
                    width: 100rpx;
                    height: 40rpx;
                    margin-left: 6rpx;
                    font-size: 20rpx;
                    border-radius: 30rpx;
                    border: 1px solid gray;
                    text-align: center;
                    line-height: 40rpx;
                    &.importantBtn {
                        border: 1px solid #ff8f06;
                        color: #ff4f01;
                    }
                }
            }
        }
    }
}
</style>
